<template>
    <div class="rs-about style1 pt-70 pb-50 md-pt-50 md-pb-50 half-bg-bottom">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 mb-20">
                    <div class="sec-title8 reverse mb-20">
                        <h2 class="sub-title primary">一中视频</h2> <span class="sub-text">CAMPUS<br>STYLE</span>
                    </div>
                    <div class="border-top"></div>
                </div>
                <div class="col-lg-3 pr-0 md-pr-15">
                    <ul  role="tablist" class="nav nav-tabs histort-part gray-bg">
                        <li role="presentation" class="nav-item tab-btns single-history" v-for="item in list" @click.stop="handleClick(item)">
                            <a style="cursor: pointer;" :class="item.active?'nav-link tab-btn active':'nav-link tab-btn'">
                                {{ item.title }}
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-9 pl-0 md-pl-15">
                    <div id="myTabContent" class="tab-content tabs-content">
                        <div 
                            :class="item.active?'tab-pane tab fade show active':'tab-pane tab fade'"
                            v-for="item in list"
                            >
                            <div class="rs-video-home9"><img
                                    :src="item.image">
                                <div class="img-part media-icon yellow-color"><a
                                         @click="open(item.video)"
                                        class="popup-videos"><i class="fa fa-play"></i></a></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="border-bottom"></div>
                </div>
            </div>
            <div class="intro-info-tabs"></div>
        </div>

    </div>
    <div id="videoModal" class="modal-box" v-show="isShowVideoModal" @click="closeModal">
            <div class="modal-content">
                <!-- <span id="closeModalBtn" class="close"  @click="closeModal">&times;</span> -->
                <video class="video-box" ref="videoPlayer" :src="modalVideoSrc"  autoplay></video>
            </div>
         </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import {getCultureList} from '@/api/api.js'
import { ElMessage, ElMessageBox } from 'element-plus'
const modalVideoSrc =  ref('')
const isShowVideoModal = ref(false);
const open = (href) => {
    modalVideoSrc.value = href;
    isShowVideoModal.value = true;
}
// 关闭弹窗函数
function closeModal() {
    isShowVideoModal.value = false;
    modalVideoSrc.value = '';
}
const list = ref([])
const handleClick = (item) => {
    list.value.forEach(item => {
        item.active = false
    })
    item.active = true
}
onMounted(()=>{
    getCultureList('yzsp','yzzc' ).then((res) => {
        list.value = res.data.map((item,index)=>{
            let active = false;
            if(index===0){
                active = true
            }
            let items =  {
                ...item,
                active: active,
                title: item.title,
                image: item.cover,
                video: item.fileIds
            }
            return items
        })
    })
})
</script>
<style lang="scss" scoped>
.half-bg-bottom {
    background: linear-gradient(to bottom, #fff 0%, #fff 50%, #273c66 50%, #273c66 100%);
}
/* 模态框背景样式 */
.modal-box {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

/* 弹窗内容样式 */
.modal-content {
    // background-color: #fefefe;
    margin: auto;
    padding: 20px 0px;
    // border: 1px solid #888;
    width: 100%;
    max-width: 900px;
    position: relative;
    width: calc(100% - 20px);
}

/* 关闭按钮样式 */
.close {
    color: #fff;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%;
    position: absolute;
}
.video-box{
    position: absolute;
    top: 180px;
    width: 100%;
    max-width: 900px;
}
.close:hover,
.close:focus {
    color: black;
}
</style>